import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'
export default class index extends Component {
  static propTypes = {
    id: PropTypes.number.isRequired,
    done: PropTypes.bool.isRequired,
    name: PropTypes.string.isRequired,
    changeDone: PropTypes.func.isRequired,
    deleteItem: PropTypes.func.isRequired
  }
  state = {
    mouse: false
  }
  handleClick = () => {
    const {id} = this.props
    this.props.changeDone(id)
  }
  handleMouse = (value) => {
    return () => {
      this.setState({mouse: value})
    }
  }
  handleDelete = (id) => {
    return () => {
      this.props.deleteItem(id)
    }
  }

  render() {
    const {name, done, id} = this.props
    return (
      <div>
        <li className={this.state.mouse?'withBc':'noBc'} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <label>
            {/* FIXME: 使用defaultChecked可以解决报错，但是无法实现全选/全不选 */}
            <input type="checkbox" onChange={this.handleClick} checked={done}/>
            <span>{name}</span>
          </label>
          <button onClick={this.handleDelete(id)} className="btn btn-danger" style={{display:!this.state.mouse?'none':'inline-block'}}>删除</button>
        </li>
      </div>
    )
  }
}
